<template>
	<view class="content">
		
		<view style="margin-left: 16rpx;">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">宠物标题</view>
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;color: #004fff;" @click="toDetail(applyInfo.adoptId)">{{applyInfo.adoptTitle}}</view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">姓名</view>
			<view class="titleView"><input type="text" v-model="applyInfo.userName" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;">性别</view>
			<view class="titleView"><input type="text" v-model="applyInfo.sex" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">年龄</view>
			<view class="titleView"><input type="number" v-model="applyInfo.age" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">现养宠数量</view>
			<view class="titleView"><input type="text" v-model="applyInfo.petNum" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;">住房情况</view>
			<view class="titleView"><input type="text" v-model="applyInfo.houseStatus" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;">婚姻状况</view>
			<view class="titleView"><input type="text" v-model="applyInfo.maritalStatus" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;">收入</view>
			<view class="titleView"><input type="text" v-model="applyInfo.earning" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">职业</view>
			<view class="titleView"><input type="text" v-model="applyInfo.job" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;">联系电话</view>
			<view class="titleView"><input type="number" v-model="applyInfo.phone" disabled /></view>
		</view>
		
		<view class="outside">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">微信号</view>
			<view class="titleView"><input type="text" v-model="applyInfo.weixin" disabled /></view>
		</view>
		
		<view style="clear: both;"></view>
		<view style="margin-left: 16rpx;">
			<view style="font-size: 28rpx;margin-top: 30rpx;clear: both;">居住地</view>
			<view class="titleView"><input type="text" v-model="applyInfo.address" disabled /></view>
		</view>
		
		<view style="margin-left: 16rpx;">
			<view style="font-size: 28rpx;margin-top: 30rpx;">申请理由</view>
			<view class="titleView"><input type="text" v-model="applyInfo.content" disabled /></view>
		</view>
		
		<view style="float: right;margin-top: 60rpx;margin-bottom: 20rpx;margin-right:20rpx;">
			<view v-if="applyInfo.isPassed == '0'" class="logo" style="background-color: #666666">已拒绝</view>
			<view v-if="applyInfo.isPassed == '1'" class="logo" style="background-color: #3cb458">已通过</view>
			<view v-if="applyInfo.isPassed == '2'" class="logo" @click="audit(applyInfo.id, '1')">通过</view>
			<view v-if="applyInfo.isPassed == '2'" class="logo1" @click="audit(applyInfo.id, '0')">拒绝</view>
		</view>

	</view>
</template>

<script>
	import axbCheckBox from '../../components/axb-checkbox/axb-checkbox.vue'
	import choseCity from "@/components/chose-city/chose-city"
	import http from '@/api/backend.js'
	export default {
		components: {
			axbCheckBox,
			choseCity
		},
		data() {
			return {
				applyInfo: {},
				userInfo: {}
			}
		},
		onLoad(e) {
			this.getById(e.id);
		},
		methods: {
			toDetail(adoptId) {
				uni.navigateTo({
					url: `/pages/home/detail?adoptId=${adoptId}`
				});
			},
			getById(id) {
				http.getApplyById({id: id}).then(res => {
					this.applyInfo = res.data
				})
			},
			audit(applyId, status) {
				var that = this
				uni.showModal({
					title: '提示',
					content: status == '0' ? '确认驳回？' : '确认通过？',
					success: function(res) {
						if (res.confirm) {
							http.applyAudit({applyId: applyId, status: status}).then(res => {
								that.getById(applyId)
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 15rpx;
	}
	
	.outside {
		float: left;
		margin-left: 16rpx;
		margin-top: 16rpx;
	}

	.imgView {
		width: 240rpx;
		height: 240rpx;
		background-color: #f1f1f1;
		display: flex;
		border-radius: 10rpx;
		margin-top: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			align-self: center;
			margin: 0 auto;
		}
	}
	.preImage {
		margin-left: -20rpx;
		margin-top: 20rpx;
		
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			
		}
		
		.addView {
			width: 160rpx;
			height: 160rpx;
			// background-color: #f1f1f1;
			display: flex;
			margin-left: 20rpx;
			
			image {
				width: 80rpx;
				height: 80rpx;
				align-self: center;
				margin: 0 auto;
			}
		}
	}

	.titleView {
		margin-top: 20rpx;

		input {
			font-size: 24rpx;
		}
	}

	.logo {
		width: 120rpx;
		height: 60rpx;
		background-color: #1976D2;
		border-radius: 15%;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		float: left;
	}
	.logo1 {
		width: 120rpx;
		height: 60rpx;
		background-color: #cccc65;
		border-radius: 15%;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		float: left;
		margin-left: 20rpx;
	}

</style>
